<style>
.quick-wrap{
    position:absolute;
    height:100px;
    background:rgba(0,0,0,0);
    top:0;
    left:0;
    width:0;
    height:0;
    z-index:800;
    display:none!important;
}

.quick-div {
	position:fixed;
	bottom:0;
	left:0px;
	z-index:900;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.quick-menu{
	-webkit-appearance:button;
	display:inline-block;
	width:36px !important;
	height:36px !important;
	line-height:38px !important;
	text-align:center !important;
	position:absolute;
	bottom:17px;
	left:17px;
	z-index:999;
	-moz-box-shadow:0 0 0 4px #FFFFFF, 0 2px 5px 4px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:0 0 0 4px #FFFFFF, 0 2px 5px 4px rgba(0, 0, 0, 0.25);
	box-shadow:0 0 0 4px #FFFFFF, 0 2px 5px 4px rgba(0, 0, 0, 0.25);
	background-color: #B70000;
	-webkit-transition: -webkit-transform 200ms;
	-webkit-transform:rotate(1deg);
	color:#FFF;
}
.quick-menu:before{
	font-size:20px;
}
.quick-menu:checked{
	-webkit-transform:rotate(135deg);
}

.quick-phone>div {
	width:32px;
	height:32px;
	border-radius:32px;
	-moz-box-shadow:0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25);
	box-shadow:0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25);
	background:#B70000;
	position:absolute;
	bottom:0;
	left:0;
	margin-bottom:20px;
	margin-left:20px;
	z-index:900;
	-webkit-transition: -webkit-transform 200ms;
}
.quick-phone>div a{
	color:#fff;
	font-size:20px;
    display: block;
    height: 100%;
    line-height: 33px;
    text-align: center;
}

.quick-phone>div.on:nth-of-type(1) {-webkit-transform: translate(0, -100px) rotate(720deg);}
.quick-phone>div.on:nth-of-type(2) {-webkit-transform: translate(47px, -81px) rotate(720deg);}
.quick-phone>div.on:nth-of-type(3) {-webkit-transform: translate(81px, -45px) rotate(720deg);}
.quick-phone>div.on:nth-of-type(4) {-webkit-transform: translate(100px, 0) rotate(720deg);}
</style>
<div class="quick-div">
	<div id="quick-phone" class="quick-phone">
		<input type="checkbox" id="quick-btn" class="quick-menu icon-plus img-circle" style="background-color:#B70000;" />
		{php $i = 1;}
		{loop $_W['quickmenu']['menus'] $nav}
		<div style="background-color:#B70000;{$nav['css']['icon']['style']}">
			<a href="{$nav['url']}" style="{$nav['css']['name']}" class="{$nav['css']['icon']['icon']}" title="{$nav['name']}"></a>
		</div>
		{php if($i>=4) break;}
		{php $i++;}
		{/loop}
	</div>
</div>
<script>
window.addEventListener("DOMContentLoaded", function(){
	btn = document.getElementById("quick-btn");
	btn.onclick = function(){
		var divs = document.getElementById("quick-phone").querySelectorAll("div");
		var className = className=this.checked?"on":"";
		for(i = 0;i<divs.length; i++){
			divs[i].className = className;
		}
		document.getElementById("quick-wrap").style.display = "on" == className? "block":"none";
	}
}, false);
</script>
